@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";

.button {
  @include composite-var($card-button);

  cursor: pointer;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  color: $sys-neutral-text-main;

  background-color: transparent;
  border: 0;
  outline-color: transparent;

  &:hover {
    color: $sys-neutral-text-support;
  }

  &:focus-visible {
    @include outline-var($container-focused-s);

    color: $sys-neutral-text-support;
    outline-color: $sys-available-complementary;
  }

  &:active {
    color: $sys-neutral-text-light;
  }

  svg {
    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
  }
}

.triggerClassName {
  --offset: #{$space-drop-list-drop-offset};
}

.wrapper {
  position: relative;
}

li.item {
  width: max-content;
}